<template>
  <div class="groupName" id="groupName">
    <!-- 功能按钮 -->
    <div class="groupName_button">
      <a-button
        class="addButton"
        type="primary"
        :disabled="!btnPerm.includes('addGroupAble')"
        @click="addRecord"
      >
        <template #icon>
          <span class="iconfont icon-Add iconadd"></span>
        </template>
        新建分组
      </a-button>
      <div class="searchContent">
        <a-input v-model:value="groupName" placeholder="搜索分组名" style="width: 192px">
          <template #suffix>
            <i class="iconfont icon-search" @click="onSearch"></i>
          </template>
        </a-input>
      </div>
    </div>
    <!-- 表格展示部分 -->
    <baseTable
      :columns="columns.memberGroupColumn"
      :dataSource="configData.records"
      :isSelect="true"
      :scroll="scroll"
      ref="hotBaseTables"
      :isShowPagination="isShowPagination"
      :showCheckDelete="showCheckDelete"
      :total="configData.total"
      @deleteRecord="deleteSelectedAll"
      @changePage="changePage"
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.ellipsis">
          <table-tool-tip :text="text" :column="column"></table-tool-tip>
        </template>
        <template v-if="column.dataIndex === 'isDefault'">
          <a-switch
            @click="switchChange(record)"
            size="small"
            v-model:checked="record.isDefault"
          />
        </template>
        <template v-if="column.dataIndex === 'oparation'">
          <a
            class="eidtRecords"
            :class="{ disable: !btnPerm.includes('editAble') }"
            @click="eidtRecord(record)"
            >{{ record.oparation[0] }}</a
          >
          <a
            class="eidtRecords"
            :class="{ disable: !btnPerm.includes('groupPersonManageAble') }"
            @click="checkDetail(record)"
            >{{ record.oparation[1] }}</a
          >
          <a-popconfirm
            placement="topRight"
            :disabled="record.isDefault || !btnPerm.includes('deleteAble')"
            @confirm="confirmDelete(record)"
          >
            <template #title>
              <p style="width: 197px">删除后分组中的用户将会统一移至默认分组</p>
            </template>
            <a
              :style="{ color: record.isDefault ? '#00000040' : '' }"
              :class="{ disable: !btnPerm.includes('deleteAble') }"
              >{{ record.oparation[2] }}</a
            >
          </a-popconfirm>
        </template>
      </template>
      <template #otherOpration>
        <a-button
          :style="{ 'margin-left': '8px' }"
          @click="deleteSelectedAll"
          :disabled="!rowSelection.length || !btnPerm.includes('deleteAble')"
          >删除</a-button
        >
      </template>
    </baseTable>

    <!-- 新建分组模态框 -->
    <base-modal
      :width="modAlProps.width"
      :isVisible="isVisible"
      :title="modAlProps.title"
      :buttons="buttons"
      @handleOk="buttonMessage"
      @handleCancle="isVisible = false"
      class="sensitive_modal"
      v-if="isVisible"
    >
      <template v-slot:body>
        <a-form
          name="advanced_search"
          autoComplete="off"
          class="ant-advanced-search-form"
          :model="formState"
          ref="groupNameGroupFrom"
        >
          <template v-if="isAddOrEdit">
            <a-form-item
              :name="['groupName', 'value']"
              :label="formState.groupName.label"
              :rules="[formState.groupName.rule]"
            >
              <a-input
                v-model:value="formState.groupName.value"
                placeholder="不超过25个字"
                show-count
                :maxlength="25"
                allow-clear
              />
            </a-form-item>
            <a-form-item
              :name="['remark', 'value']"
              :label="formState.remark.label"
              :rules="[formState.remark.rule]"
            >
              <a-textarea
                style="position: relative"
                v-model:value="formState.remark.value"
                placeholder="不超过200个字"
                show-count
                :maxlength="200"
              />
            </a-form-item>
            <a-form-item
              :name="['isDefault', 'value']"
              :label="formState.isDefault.label"
              :rules="[formState.isDefault.rule]"
            >
              <a-switch size="small" v-model:checked="formState.isDefault.value" />
            </a-form-item>
            <!-- 会员组新建、编辑的tab切换 -->
            <baseTabs
              @changeTabs="changeTopTabs"
              :activeKey="activeKey"
              :tabsList="tabsList"
              v-slot="{ item }"
            >
              <a-form-item
                style="margin-top: 19px"
                :name="['selectAuth', 'value']"
                :label="formState.selectAuth.label"
                :rules="[formState.selectAuth.rule]"
              >
                <div class="showall-box">
                  <!-- <div class="openorclose" @click="openorclose" v-show="!isOpenAllColumn">
                    <a>全部收起</a>
                    <i class="iconfont icon-up" style="font-size: 24px"> </i>
                  </div>
                  <div class="openorclose" @click="openorclose" v-show="isOpenAllColumn">
                    <a>全部展开</a>
                    <i class="iconfont icon-down" style="font-size: 24px"> </i>
                  </div> -->
                  <a-form-item-rest>
                    <a-select
                      style="width: 182px"
                      v-model:value="siteValue"
                      placeholder="请选择站点"
                      @change="changeSite"
                      :options="siteOptions.map((item: dataSourceType) => ({ value: item.id, label: item.siteName }))"
                    ></a-select>
                  </a-form-item-rest>
                </div>
                <a-checkbox
                  v-if="isShowCheckbox"
                  class="checkbox-all"
                  v-model:checked="isSelectAuthAll"
                  @change="changeSelectOrgAll"
                >
                  <span>所有栏目</span>
                </a-checkbox>
                <base-tree
                  v-show="isShowTreeColumn"
                  :treeData="authTreeData"
                  :expandedKeys="expandedKeys"
                  :fieldNames="fieldNames"
                  :checkedKeys="selectedColumnKeys"
                  @checked_Keys="selected_Keys"
                ></base-tree>
              </a-form-item>
            </baseTabs>
          </template>
          <template v-else>
            <a-form-item
              :name="['batchSensitiveWord', 'value']"
              :label="formState.batchSensitiveWord.label"
            >
              <upload
                :action="props_upload.action"
                :accept="props_upload.accept"
                :directory="props_upload.directory"
                :listType="props_upload.listType"
              >
              </upload>
            </a-form-item>
          </template>
        </a-form>
      </template>
    </base-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, onMounted, nextTick, createVNode, watch } from "vue";
import baseTable from "@/components/table/baseTable.vue";
import tableToolTip from "@/components/table/tableToolTip.vue";
import { useRouter } from "vue-router";
import columns from "@/components/table/tableConfig/columnsName";
import { getTableScroll } from "@/components/table/tableConfig/table";
import baseModal from "@/components/modal/baseModal.vue";
import msgModal from "@/components/modal/modelConfig/MsGModal";
import upload from "@/components/upload/uploadFile.vue";
import { checkGroupName, checkSelectAuth } from "./formRuler";
import { Modal, TreeSelectProps, message } from "ant-design-vue";
import baseTree from "@/components/tree/baseTree.vue";
import request from "@/api/index";
import baseTabs from "@/components/tabs/baseTabs.vue";
import { scrollType, modeProp } from "@/type.d";
import getters from "@/store/getters";
import { routerPerm } from "@/utils/common";
// type
type configDataType = {
  total: number;
  size: number;
  records: any[];
};
interface dataSourceType {
  [propName: string]: any;
}
interface FormState {
  groupName: dataSourceType;
  password: string;
  remember: boolean;
}
//getters
const userInfo = getters.userInfo();
//data
const btnPerm = ref<any[]>([]);
const router = useRouter();
let scroll: scrollType = reactive({ y: "", isFixed: false }); // 表单滚动设置
const isShowPagination = true; // 是否需要配分页器
const showCheckDelete = true; // 是否需要分页器中的自定义全选和删除
const isSelectAuthAll = ref<boolean>(true);
//表格数据
let configData = reactive<configDataType>({ total: 0, size: 10, records: [] });
let siteObj = reactive<dataSourceType>({});
const groupPrivileges = ref<dataSourceType[]>([]);
const authTreeData = ref<TreeSelectProps["treeData"]>([]);
const hotBaseTables = ref<any>(null);
let rowSelection = ref<(string | number)[]>([]);
const deleteArr = ref<(string | number)[]>([]);
const siteOptions = ref<dataSourceType[]>([]);
const expandedKeys = ref<number[]>([]);
const publishChannelIds = ref<number[]>([]);
const viewChannelIds = ref<number[]>([]);
const checkedKeys = ref<any[]>([]);
const allAuthKey = ref<number[]>([]);
// 模态框数据
const isAddOrEdit = ref<boolean>(true); //判断是新家、编辑或者批量上传来复用模态框
const isVisible = ref<boolean>(false);
const isShowCheckbox = ref<boolean>(false);
const isOpenAllColumn = ref<boolean>(true);
const isShowTreeColumn = ref<boolean>(false);
const groupName = ref<string>("");
const siteValue = ref<string | undefined>(userInfo.siteId);
const siteId = ref<number>(0);
const modAlProps: modeProp = reactive({
  width: "M",
  title: "新建",
});

//树结构数据
const fieldNames = reactive<dataSourceType>({
  key: "id",
  title: "channelName",
});
const selectedColumnKeys = ref<(string | number | any)[]>([]);

//新建、编辑切换选项
const tabsList = [
  { tabName: "栏目浏览权限", key: 1 },
  { tabName: "栏目投稿权限", key: 2 },
];
const activeKey = ref<number>(1);
const groupNameGroupFrom = ref<any>("groupNameGroupFrom");

const formState = reactive<dataSourceType>({
  groupName: {
    value: "",
    rule: {
      required: true,
      validator: checkGroupName,
      trigger: ["blur"],
      msg1: "分组名称不可为空！",
      msg2: "分组名称已存在！",
      api: "fetchMemberGroupUnique",
      params: { id: "" },
    },
    label: "分组名称",
  },
  remark: {
    value: "",
    rule: {
      required: false,
    },
    label: "分组备注",
  },
  isDefault: {
    value: "",
    trigger: ["change", "blur"],
    rule: { required: false },
    label: "是否默认:",
  },
  selectAuth: {
    value: "",
    trigger: ["change", "blur"],
    rule: {
      required: true,
      validator: checkSelectAuth,
      trigger: ["blur"],
      msg1: "栏目权限不可为空！",
      params: { key: isSelectAuthAll.value || selectedColumnKeys.value },
    },
    label: "选择栏目:",
  },
  id: "",
  applyScope: 0,
});

// computed
rowSelection = computed(() => {
  return hotBaseTables.value.selectedRowKeys;
});

//methods

//监听栏目权限全选
const changeSelectOrgAll = (e: any) => {
  if (e.target.checked) {
    if (activeKey.value === 1) {
      siteObj.allView = true;
    } else if (activeKey.value === 2) {
      siteObj.allPublish = true;
    }
    selectedColumnKeys.value = allAuthKey.value;
    isShowTreeColumn.value = false;

    commonAddSiteObj();
  } else {
    if (activeKey.value === 1) {
      siteObj.allView = false;
    } else if (activeKey.value === 2) {
      siteObj.allPublish = false;
    }
    selectedColumnKeys.value = [];
    isShowTreeColumn.value = true;
  }

  formState.selectAuth.rule.params.key = selectedColumnKeys.value;
};

const openorclose = () => {
  isOpenAllColumn.value = !isOpenAllColumn.value;
  expandedKeys.value = !isOpenAllColumn.value ? allAuthKey.value : [];
};

//获取全部站点
const fetchContentAllSiteList = async () => {
  siteOptions.value = await request.fetchContentAllSiteList();
};

//站点数组去重
const onlyOneSiztId = () => {
  if (
    groupPrivileges.value.length &&
    groupPrivileges.value.findIndex((item: any) => item.siteId === siteObj.siteId) != -1
  ) {
    groupPrivileges.value.splice(
      groupPrivileges.value.findIndex((item: any) => item.siteId === siteObj.siteId),
      1
    );
  }
};

//处理增加站点公用方法
const commonAddSiteObj = () => {
  if (selectedColumnKeys.value.length) {
    siteObj.siteId = siteId.value;
    siteObj.groupId = formState.id;
    if (selectedColumnKeys.value.length === allAuthKey.value.length) {
      isShowTreeColumn.value = false;
      isSelectAuthAll.value = true;
      if (activeKey.value === 1) {
        siteObj.allView = true;
        siteObj.viewChannelIds = null;
        siteObj.allPublish =
          typeof siteObj.allPublish === "boolean" ? siteObj.allPublish : false;
        siteObj.publishChannelIds = siteObj.publishChannelIds || null;
      } else if (activeKey.value === 2) {
        siteObj.allPublish = true;
        siteObj.publishChannelIds = null;
        siteObj.allView = typeof siteObj.allView === "boolean" ? siteObj.allView : false;
        siteObj.viewChannelIds = siteObj.viewChannelIds || null;
      }
    } else {
      if (activeKey.value === 1) {
        siteObj.allView = false;
        siteObj.allPublish =
          typeof siteObj.allPublish === "boolean" ? siteObj.allPublish : false;
        siteObj.viewChannelIds = selectedColumnKeys.value;
      } else if (activeKey.value === 2) {
        siteObj.allPublish = false;
        siteObj.allView = typeof siteObj.allView === "boolean" ? siteObj.allView : false;
        siteObj.publishChannelIds = selectedColumnKeys.value;
      }
    }
  } else {
    if (groupPrivileges.value.length) {
      groupPrivileges.value =
        groupPrivileges.value.filter(
          (item: dataSourceType) => item.siteId != siteId.value
        ) || [];
    }
  }
};

//站点变动
const changeSite = (e: any) => {
  onlyOneSiztId();
  Object.keys(siteObj).length && groupPrivileges.value.push(siteObj);
  siteObj = {};
  siteId.value = e;
  fetchChannelListBySiteId();
};

const fetchChannelListBySiteId = async () => {
  const postData = {
    siteId: siteId.value,
    allPermFilter: false,
  };
  authTreeData.value = (await request.fetchChannelListBySiteId(postData)) as any;

  if (authTreeData.value!.length) {
    getAllOrgKey(authTreeData.value);
  } else {
    allAuthKey.value = [];
  }
  if (authTreeData.value!.length && allAuthKey.value.length) {
    if (
      !groupPrivileges.value.length ||
      (groupPrivileges.value.length &&
        !groupPrivileges.value.find(
          (jitem: dataSourceType) => jitem.siteId === siteId.value
        ))
    ) {
      isShowCheckbox.value = true;
      isShowTreeColumn.value = false;
      selectedColumnKeys.value = allAuthKey.value;
      formState.selectAuth.rule.params.key = allAuthKey.value;
      commonAddSiteObj();
    }
  } else {
    isShowTreeColumn.value = true;
    isShowCheckbox.value = false;
  }
};

//获取组织的全部id
const getAllOrgKey = (data: any) => {
  data.length &&
    data.map((item: any) => {
      if (!allAuthKey.value.find((jitem: number) => jitem === item.id)) {
        allAuthKey.value.push(item.id);
      }
      if (item.children && item.children.length) {
        getAllOrgKey(item.children);
      }
    });
};

// 选择某个站点下的栏目
const selected_Keys = (obj: dataSourceType) => {
  selectedColumnKeys.value = obj.checkedKeys;
  formState.selectAuth.rule.params.key = selectedColumnKeys.value;
  commonAddSiteObj();
};

//搜索获取数据参数配置
const onSearch = async () => {
  let datas: dataSourceType = {
    groupName: groupName.value,
  };
  getRecord(datas);
};

const switchChange = (record: any) => {
  if (!record.isDefault) {
    configData.records.length &&
      configData.records.forEach((item) => {
        item.isDefault = item.id == record.id ? true : false;
      });
    message.warn("请至少设置一个默认分组");
    return;
  }
  let params: dataSourceType = {
    id: record.id,
  };

  request
    .fetchMemberGroupDefault(params)
    .then((res: any) => {
      if (res.code == "00000 00000") {
        message.success(res.message);
        getRecord();
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};

//会员查看详情
const checkDetail = (record: any) => {
  if (!btnPerm.value.includes("groupPersonManageAble")) return;
  router.push({
    path: "/member/groupName/detail",
    query: {
      id: record.id,
      isDefault: record.isDefault ? 1 : 0,
      groupName: record.groupName,
    },
  });
};

// 模板文件上传配置
const props_upload = reactive<dataSourceType>({
  action: "",
  accept: "xlsx,xls",
  directory: false,
  listType: "text",
});
const buttons = ref<dataSourceType[]>([]); //模态框button按钮个数和文案修改

const addRecord = async () => {
  //添加会员数据
  nextTick(() => {
    siteObj = {};
    isSelectAuthAll.value = true;
    selectedColumnKeys.value = [];
    groupPrivileges.value = [];
    isVisible.value = true;
    isAddOrEdit.value = true;
    modAlProps.title = "新建分组";
    formState.groupName.value = "";
    allAuthKey.value = [];
    formState.remark.value = "";
    formState.isDefault.value = false;
    formState.groupName.value = "";
    siteValue.value = undefined;
    isShowCheckbox.value = false;
    isShowTreeColumn.value = false;
    siteId.value = 0;
    activeKey.value = 1;
    formState.id = "";

    buttons.value = [
      {
        text: "保存",
        "html-type": "submit",
        keepAlive: true,
      },
      {
        text: "保存并继续新建",
        "html-type": "submit",
        keepAlive: true,
      },
    ];
  });
};

//编辑会员数据
const eidtRecord = async (item: dataSourceType) => {
  if (!btnPerm.value.includes("editAble")) return;
  const data = await request.fetchMemberGroupDetail({ id: item.id });
  isAddOrEdit.value = true;
  groupPrivileges.value = data.groupPrivileges;
  formState.groupName.value = data.groupName;
  formState.groupName.rule.params.id = data.id;
  formState.remark.value = data.remark;
  formState.isDefault.value = data.isDefault;
  formState.id = data.id;
  isVisible.value = true;
  siteValue.value = data.groupPrivileges[0]?.siteId;
  // siteValue.value = undefined;
  isShowCheckbox.value = false;
  isShowTreeColumn.value = false;
  siteId.value = 0;
  activeKey.value = 1;
  modAlProps.title = "编辑分组";
  buttons.value = [
    {
      text: "保存",
      "html-type": "submit",
      keepAlive: true,
    },
  ];
};

// 新添或编辑会员分组调取接口
const buttonMessage = async (msg: dataSourceType) => {
  onlyOneSiztId();
  Object.keys(siteObj).length && groupPrivileges.value.push(siteObj);
  groupNameGroupFrom.value
    .validate()
    .then(() => {
      let params: dataSourceType = {
        remark: formState.remark.value,
        groupName: formState.groupName.value,
        isDefault: formState.isDefault.value,
        groupPrivileges: groupPrivileges.value,
        id: formState.id,
      };
      let type: string = modAlProps.title.includes("编辑") ? "Edit" : "Add";
      request[type === "Edit" ? "fetchMemberGroupUpdate" : "fetchMemberGroup"](params)
        .then((res: any) => {
          if (res.code == "00000 00000") {
            getRecord();
            siteObj = {};
            message.success(res.message);
          } else {
            message.error(res.message);
          }
        })
        .catch((err: any) => {
          throw new Error(err);
        });
      isVisible.value = msg.text == "保存" ? false : true;
      groupNameGroupFrom.value.resetFields();
    })
    .catch(() => {});
};
// 删除单个会员
const confirmDelete = async (item: any) => {
  if (item.isDefault) {
    return;
  }
  deleteArr.value = [item.id];
  deleteRecords(deleteArr.value);
};
//删除已选所有会员
const deleteSelectedAll = async () => {
  let keys = rowSelection.value;
  Modal.confirm(
    Object.assign({}, msgModal.confirm, {
      title: "是否删除选中的分组？",
      content: "删除后分组中的用户将会统一移至默认分组",
      icon: createVNode("i", {
        class: "iconfont icon-warn warning_ICON",
      }),
      okText: "确定",
      onOk: async () => {
        await deleteRecords(keys);
        Modal.destroyAll();
      },
      onCancel() {
        Modal.destroyAll();
      },
    })
  );
};
// 调接口删除会员
const deleteRecords = async (keys: (string | number)[] = []) => {
  await request.fetchMemberGroupDelete({ ids: keys }).then((res: any) => {
    if (res.code == "00000 00000") {
      getRecord();
      message.success(res.message);
    } else {
      message.error(res.message);
    }
  });
};

// 获取会员表格数据
const getRecord = async (datas: dataSourceType = {}) => {
  const data: {} = {
    pageNumber: datas.pageNumber || 0,
    pageSize: datas.pageSize || 10,
    groupName: datas.groupName || "",
  };
  const groupData = (await request.fetchMemberGroupPage(data)) || {};
  let reqData = groupData;
  let sourceData = reactive({});
  const records: any[] = [];
  reqData?.records?.map((item: any, index: number) => {
    sourceData = {
      groupName: item.groupName,
      remark: item.remark,
      oparation: ["编辑", "组成员管理", "删除"],
      isDefault: item.isDefault,
      id: item.id,
    };
    records.push(sourceData);
  });
  configData.total = reqData.total;
  configData.size = reqData.size;
  configData.records = records;
  hotBaseTables.value.selectedRowKeys = [];
  nextTick(() => {
    scroll.y = getTableScroll(74, "groupName").y;
    scroll.isFixed = getTableScroll(74, "groupName").isFixed;
  });
};

//切换分页器
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  let datas: dataSourceType = {
    pageNumber: data.pageCurrent,
    pageSize: data.pageSize,
  };
  getRecord(datas);
};

//改变新建、编辑tab切换
const changeTopTabs = (key: number) => {
  activeKey.value = key;
};

//watch
watch(
  () => siteId.value,
  (newVal, olVal) => {
    if (groupPrivileges.value.length) {
      groupPrivileges.value.forEach((item: dataSourceType) => {
        if (item.siteId === newVal) {
          if (activeKey.value === 1) {
            siteObj.allView = item.allView;
            isShowCheckbox.value = true;
            isSelectAuthAll.value = item.allView;
            isShowTreeColumn.value = item.allView ? false : true;
            selectedColumnKeys.value = item.viewChannelIds;
          } else if (activeKey.value === 2) {
            isShowCheckbox.value = true;
            siteObj.allPublish = item.allPublish;
            isSelectAuthAll.value = item.allPublish;
            isShowTreeColumn.value = item.allPublish ? false : true;
            selectedColumnKeys.value = item.publishChannelIds;
          }
        }
      });
    }
  }
);
watch(
  () => activeKey.value,
  (newVal, olVal) => {
    if (groupPrivileges.value.length) {
      groupPrivileges.value.forEach((item: dataSourceType) => {
        if (item.siteId === siteId.value) {
          if (newVal === 1) {
            isShowCheckbox.value = true;
            isSelectAuthAll.value = item.allView || siteObj.allView;
            isShowTreeColumn.value = item.allView || siteObj.allView ? false : true;
            selectedColumnKeys.value = item.viewChannelIds;
          } else if (newVal === 2) {
            isShowCheckbox.value = true;
            isSelectAuthAll.value = item.allPublish || siteObj.allPublish;
            isShowTreeColumn.value = item.allPublish || siteObj.allPublish ? false : true;
            selectedColumnKeys.value = item.publishChannelIds;
          }
        }
      });
    }
  }
);

//onmounted
onMounted(() => {
  btnPerm.value = routerPerm();
  getRecord();
  fetchContentAllSiteList();
});
</script>
<style lang="less" scoped>
.groupName {
  width: 100%;
  height: calc(100% - 72px);
  padding: 16px;
  background-color: #fff;

  .groupName_button {
    padding-bottom: 24px;
    display: flex;

    .addButton {
      display: flex;
      align-items: center;
      margin-right: 8px;

      .iconadd {
        font-size: 24px;
        margin-right: 4px;
      }
    }

    .importButton {
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      margin-right: 8px;
    }

    .searchContent {
      margin-left: auto;
      margin-right: 0px;

      .icon-search {
        font-size: 20px;
        color: rgba(0, 0, 0, 0.45);
        position: absolute;
        right: 12px;
        top: 0px;
      }
    }
  }

  .eidtRecords {
    margin-right: 16px;
  }
}

.selectauth-item {
  ::v-deep(.ant-form-item-label > label) {
    height: 22px;
  }
}

.showall-box {
  display: flex;
  flex-direction: row;
  align-items: center;

  .openorclose {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

.checkbox-all {
  margin-top: 8px;
}

::v-deep(.ant-form-item:last-child) {
  margin-bottom: 0px;
}

:deep(.ant-form-item) {
  width: 604px;
  display: flex;

  .ant-form-item-control {
    width: 508px;
    margin-left: 4px;
    flex: unset;
  }

  .ant-form-item-label {
    flex-grow: 0;
    width: 80px;
    text-align: right;
  }
}

::v-deep(.ant-table-cell:nth-last-of-type(1)) {
  text-align: right;
  margin-right: 16px;
}

::v-deep(.ant-form-item-control-input-content:hover) {
  .anticon-close-circle {
    display: block;
  }

  .ant-input-show-count-suffix {
    // display: none;
  }
}
</style>
